<template>
	<view class="refund">
		<!-- 退单申请-->
		<view class="shenqing">
			<view class="hd">退单申请</view>
			<form @submit="formSubmit" class="bd">
				<view class="input-item">
					<view class="tit">退款原因：</view>
					<picker mode="selector" :range="reasonArr" @change="pickerChange">
						<view class="input-text">{{reason}}</view>
					</picker>
					
				</view>
				<view class="input-item input-number" v-if="onlyMoney!=0">
					<view class="tit">退款件数：</view>
					<uni-number-box @eventChange="bindChange" :min="1" :max="parseInt(orderDetail.items.buy_number_count)" :step="1"></uni-number-box>
				</view>
				<view class="input-item">
					<view class="tit">退款金额：</view>
					<input type="text" :value="money" class="input-text" name="price" disabled/>
				</view>
				<view class="input-item">
					<view class="tit">退款说明：</view>
					<textarea value="" placeholder="输入退款说明" name="msg"/>
				</view>
				<button form-type="submit" class="submit">提交申请</button>
			</form>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from "@/components/uni-number-box.vue"
	export default {
		components:{
			uniNumberBox
		},
		data() {
			return {
				orderId:0,
				goodsId:0,
				orderDetail:[],
				afterSale:[],
				reasonArr:[],
				reason:'',
				onlyMoney:0,
				number:'',
				money:0
			}
		},
		onLoad(params) {
			this.orderId=params.oid;
			this.goodsId=params.gid;
			let self=this;
			
			// 售后信息
			let afterSaleUrl=this.requestUrl.afterSale;
			let afterParam={
				data:{
					oid:this.orderId,
					did:this.goodsId
				}
			}
			this.util.request(afterSaleUrl,'post',function(res){
				if(res.data.code==0 && res.data.data){
					let data=res.data.data;
					self.orderDetail=data.order_data;
					self.number=self.orderDetail.items.buy_number;
					// 支付状态，已支付
					if(self.onlyMoney){
						// 未发货之前，只退钱
						self.reasonArr=data.return_only_money_reason
					}else{
						// 已发货或者已完成，申请退货退钱
						self.reasonArr=data.return_money_goods_reason
					}
				}
			},afterParam)
			// 支付状态，已支付
			if(self.orderDetail.pay_status==1){
				// 未发货之前，只退钱
				if(self.orderDetail.status==2){
					this.onlyMoney=0;
				}
				// 已发货或者已完成，申请退货退钱
				if(self.orderDetail.pay_status==3 || self.orderDetail.pay_status==4){
					this.onlyMoney=1;
				}
			}
			
			
		},
		methods: {
			// picker值改变,退款原因
			pickerChange(e) {
			    this.reason = this.reasonArr[e.target.value];
			},
			
			bindChange(e){
				this.number=e.number
			},
			
			formSubmit(e){
				if(this.reason==''){
					uni.showToast({
						title:'原因不能为空',
						duration:1500
					})
					return false;
				}
				if(this.number==0){
					uni.showToast({
						title:'件数不能为0',
						duration:1500
					})
					return false;
				}
				if(parseFloat(e.detail.value.price)>parseFloat(this.orderDetail.items.total_price)){
					uni.showToast({
						title:'金额有误',
						duration:1500
					})
					return false;
				}
				let params={
					data:{
						order_id:this.orderId,
						order_detail_id:this.goodsId,
						type:this.onlyMoney,
						price:parseFloat(e.detail.value.price),
						msg:e.detail.value.msg,
						reason:this.reason,
						number:this.number
					}
				}
				let createAfterSaleUrl=this.requestUrl.createAfterSale;
				this.util.request(createAfterSaleUrl,'post',function(res){
					uni.showToast({
						title: res.data.msg,
						duration:1500,
					});
					if(res.data.code==0){
						setTimeout(function(){
							uni.navigateBack({
								delta:1
							})
						},1500)
					}
				},params)
				
			}
		},
		watch:{
			number:function(){
				this.money=this.orderDetail.items.price*this.orderDetail.items.buy_number;
			}
		}
	}
</script>

<style scoped lang="scss">
	.refund{background:$uni-bg-color-grey;padding:20rpx}
	.shenqing{background: #FFFFFF;border-radius: $uni-border-radius-base;padding:20rpx;display: flex;flex-direction: column;margin-top:15rpx}
	.shenqing .hd{font-size: $uni-font-size-lg + 4upx;text-align: center;width:100%;line-height: 50rpx;color: #E04B28;}
	.shenqing .bd{display: flex;flex-direction: column;}
	.input-item{width:100%;}
	.input-item .tit{font-size: $uni-font-size-lg;color: $uni-text-color;padding:25rpx 0 15rpx;}
	.input-text{height: 60rpx;line-height: 60rpx;padding:0 10rpx;border-top:solid 1px #EEEEEE;border-bottom:solid 1px #EEEEEE;;}
	.input-number{height: 160rpx;}
	.input-item textarea{border:solid 1px #EEEEEE;border-radius: $uni-border-radius-base;padding:15rpx;width:100%;box-sizing: border-box;} 
	.submit{margin-top: 30rpx;background:$uni-bg-color-zhu;color:#FFFFFF;}
</style>
